import { useSortable } from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"

const itemStyle = {
  minWidth: "607px",
  height: "420px",
  backgroundColor: "#FBE8E8",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
}
/**
 * @description: //ASD 使用排序的时候，不再是注册useDraggable。useSortable 钩子是一个抽象，它组成了 useDroppable 和 useDraggable 钩子
 * @param {*} props
 * @return {*}
 */
function SortableItem(props) {
  // 必须传入一个id，唯一标识可拖动元素
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id: props.id
    })
  
  // 实时更新元素位置,并设置transition元素交换动画
  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  }

  return (
    <div
      ref={setNodeRef}
      style={{ ...itemStyle, ...style, ...props.style }}
      {...attributes}
      {...listeners}
    >
      {props.children}
    </div>
  )
}

export { SortableItem }
